<template>
	<div class="HomeSwiper">
		<div class="title">
			<img :src="info.titleIcon" />
			<h3>{{info.titleText}}</h3>
		</div>
		<swiper :options="swiperOption">
		    <swiper-slide v-for="(items,index) of info.products"
		    	:key = "index">
		    	<ul>
		    		<router-link
		    			tag="li"
		    			to="/Details"
		    			v-for="(item,index) of items"
		    			:key = "index">
		    			<div class="img">
		    				<img :src="item.proImg" />
		    			</div>
		    			<div class="price">
		    				<span>{{item.newPrice | fixed | rmb}}</span>
		    				<s>{{item.oldPrice | fixed | rmb}}</s>
		    			</div>
		    			<p>{{item.proDec}}</p>
		    		</router-link>
		    	</ul>
		    </swiper-slide>
		 </swiper>
	</div>
</template>

<script>
	export default{
		name:"HomeSwiper",
		props:["info"],
		data(){
			return{
				swiperOption:{}
			}
		},
		filters:{
			fixed:function(v){
				return parseInt(v).toFixed(2)
			},
			rmb:function(v){
				return '￥' + v
			}
		}
	}
</script>

<style scoped>
	.HomeSwiper{
		width:100%;
	}
	.HomeSwiper .title{
		width:100%;
		height: 94px;
		display: flex;
		align-items: center;
	}
	.HomeSwiper .title img{
		width:28px;
		height: 38px;
		margin:0 20px 0 23px;
	}
	.HomeSwiper .title h3{
		color:#333;
		font-size:28px;
	}
	.HomeSwiper ul{
		width:100%;
		display: flex;
		justify-content: space-around;
	}
	.HomeSwiper ul li{
		width:328px;
		height: 480px;
		border: 2px solid #EEEEEE;
	}
	.HomeSwiper ul li .img{
		width:100%;
		height: 0;
		padding-bottom:108%;
	}
	.HomeSwiper ul li .img img{
		width:100%;
	}
	.HomeSwiper ul li .price{
		margin:0 35px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.HomeSwiper ul li .price span{
		font-size: 28px;
		color:#ff0000;
	}
	.HomeSwiper ul li .price s{
		font-size: 23px;
		color:#666;
	}
	.HomeSwiper ul li p{
		color:#666;
		font-size: 28px;
		letter-spacing: 2px;
		margin:0 25px;
		line-height: 40px;
	}
</style>